feat: Implement automatic adding of jsxImportSource pragma definition by iChenLei · Pull Request #2353 · emotion-js/emotion

iChenLei · 2021-04-16T16:46:09Z

What: To fix #2070 and fix #2373

Why: when using the new fragma jsxImportSource - to automatically add the new pragma definition to the top of the file page, like already is implemented with the old pragma /* @jsx jsx */

How: Add eslint rule support.

Checklist:

Documentation
Tests
Code complete
Changeset

jsx-runtime

react official blog -> https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html
babel support -> https://babeljs.io/docs/en/babel-plugin-transform-react-jsx#customizing-the-automatic-runtime-import

Add jsxImportSource option

The default custom-automatic-runtime is @emotion/react, more jsx-runtime support detail you can found in @emotion/react source code like follows
https://github.com/emotion-js/emotion/blob/main/packages/react/src/jsx-dev-runtime.js
https://github.com/emotion-js/emotion/blob/main/packages/react/src/jsx-runtime.js

- "@emotion/jsx-import": "error"
+ "@emotion/jsx-import": [2, "jsxImportSource"]

// .eslintrc.js
module.exports = {
  root: true,
  plugins: [ '@emotion'],
  rules: {
    "@emotion/jsx-import": [2, "jsxImportSource"]
   }
}

It works as follows:

Add jsxImportSource custom jsx-runtime option

- "@emotion/jsx-import": "error"
+ "@emotion/jsx-import": [2, { jsxImportSource: "customreact/jsx-runtime"  }]

// .eslintrc.js
module.exports = {
  root: true,
  plugins: [ '@emotion'],
  rules: {
    "@emotion/jsx-import": [2, { jsxImportSource: "customreact/jsx-runtime"  }]
   }
}

It works as follows:

/cc @Andarist @mitchellhamilton

changeset-bot · 2021-04-16T16:46:12Z

🦋 Changeset detected

Latest commit: 6ada9d9

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@emotion/eslint-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

codesandbox-ci · 2021-04-16T16:50:01Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 6ada9d9:

Sandbox	Source
Emotion	Configuration

codecov · 2021-04-16T16:50:04Z

Codecov Report

Merging #2353 (6ada9d9) into main (685bbec) will increase coverage by 0.03%.
The diff coverage is 100.00%.

Impacted Files	Coverage Δ
packages/eslint-plugin/src/rules/jsx-import.js	`97.77% <100.00%> (+1.05%)`	⬆️

…t-jsxImportSource

emmatown

Could you change the config to be like this?

The default should be this:

{
  "runtime": "classic"
}

and to use the new runtime, it should be this

{
  "runtime": "automatic"
}

and with a custom importSource, it should be this:

{
  "runtime": "automatic",
  "importSource": "whatever"
}

iChenLei · 2021-04-24T07:35:23Z

After I changed the implemention:

{ "runtime": "automatic" }

{ "runtime": "automatic", "importSource": "whatever" }

If your config is not oneOf [{ "runtime": "xx" }, { "runtime": "xx", "importSource": "yy" }], your code will be treated by the previous @emotion/eslint-plugin. jsxImportSource support is a special deal.

/cc @mitchellhamilton @Andarist Hi, maintainers, do you have a little time to review my PR? Thanks

…t-jsxImportSource

osdiab · 2021-05-10T08:42:02Z

Looking forward to using this!

…t-jsxImportSource

ryanrabello

I'm not qualified to approve this PR. But I would love to be able to use the code in here

avertin · 2021-10-14T00:53:27Z

I really appreciate this PR. For now, I've copied this as a local eslint rule for my project. Hopefully it can be integrated soon.

I noticed one difference between classic and automatic options that I was hoping to understand better. For classic, once the jsx import rule is satisfied, these additional rules are also satisfied ( 'jsx' is defined but never used - no-unused-vars AND 'React' must be in scope when using JSX react/react-in-jsx-scope). With automatic, after the jsx import rule is satisfied, these errors are still present. I'm new to eslint rules and I was wondering what accounts for this difference?

emmatown · 2021-10-14T01:27:52Z

'jsx' is defined but never used - no-unused-vars

With the automatic runtime, that error is correct, it's unused and shouldn't be there.

'React' must be in scope when using JSX react/react-in-jsx-scope

That rule should be disabled when using the automatic runtime - https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/react-in-jsx-scope.md#when-not-to-use-it

implement automatic adding of jsxImportSource pragma definition

bd501b5

Merge branch 'main' of https://github.com/iChenLei/emotion into eslin…

2211dce

…t-jsxImportSource

emmatown reviewed Apr 17, 2021

View reviewed changes

chore: change the config implemention

7bbc03d

iChenLei requested a review from emmatown April 24, 2021 07:38

iChenLei added 3 commits May 8, 2021 11:08

Merge branch 'main' of https://github.com/iChenLei/emotion into eslin…

5b75bb4

…t-jsxImportSource

test: add ut for test converage

fb9c777

test: add jsx attr for test coverage

57a92cc

iChenLei mentioned this pull request May 10, 2021

@emotion/eslint-plugin: support @jsxImportSource #2373

Closed

iChenLei added 2 commits June 30, 2021 14:07

Merge branch 'main' of https://github.com/iChenLei/emotion into eslin…

316e4e1

…t-jsxImportSource

fix: run eslint --fix

4bdbacd

iChenLei force-pushed the eslint-jsxImportSource branch from 53997a1 to 4bdbacd Compare June 30, 2021 06:16

fix: eslint

dd99138

ryanrabello approved these changes Jul 28, 2021

View reviewed changes

Merge branch 'main' into eslint-jsxImportSource

37fa8f7

emmatown reviewed Sep 13, 2021

View reviewed changes

Comment thread packages/eslint-plugin/src/rules/jsx-import.js

iChenLei added 2 commits September 15, 2021 16:28

chore: add jsxImportSource check

be486b5

chore: add unit test for jsxImportSource check

5559478

iChenLei requested a review from emmatown September 15, 2021 08:37

Merge branch 'main' into eslint-jsxImportSource

dd46c69

emmatown added 2 commits October 14, 2021 11:24

Update messages

8a5b645

Merge branch 'main' into eslint-jsxImportSource

6ada9d9

emmatown approved these changes Oct 14, 2021

View reviewed changes

emmatown merged commit d7d768e into emotion-js:main Oct 14, 2021

github-actions Bot mentioned this pull request Oct 14, 2021

Version Packages #2495

Merged

iChenLei deleted the eslint-jsxImportSource branch October 14, 2021 03:01

github-actions Bot mentioned this pull request Oct 14, 2021

Version Packages iChenLei/emotion#1

Open

Andarist mentioned this pull request Oct 14, 2021

Setting up a basic React/Emotion project results in Exception: pragma and pragmaFrag cannot be set #2442

Closed

GuillaumeCisco mentioned this pull request Nov 12, 2021

JSX pragma not working Typescript swc-project/swc#838

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Implement automatic adding of jsxImportSource pragma definition#2353

feat: Implement automatic adding of jsxImportSource pragma definition#2353
emmatown merged 15 commits intoemotion-js:mainfrom
iChenLei:eslint-jsxImportSource

iChenLei commented Apr 16, 2021 •

edited

Loading

Uh oh!

changeset-bot Bot commented Apr 16, 2021 •

edited

Loading

Uh oh!

codesandbox-ci Bot commented Apr 16, 2021 •

edited

Loading

Uh oh!

codecov Bot commented Apr 16, 2021 •

edited

Loading

Uh oh!

emmatown left a comment

Uh oh!

iChenLei commented Apr 24, 2021 •

edited

Loading

Uh oh!

osdiab commented May 10, 2021

Uh oh!

ryanrabello left a comment

Uh oh!

Uh oh!

avertin commented Oct 14, 2021

Uh oh!

emmatown commented Oct 14, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

iChenLei commented Apr 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

jsx-runtime

Add jsxImportSource option

Add jsxImportSource custom jsx-runtime option

Uh oh!

changeset-bot Bot commented Apr 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

codesandbox-ci Bot commented Apr 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Apr 16, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

emmatown left a comment

Choose a reason for hiding this comment

Uh oh!

iChenLei commented Apr 24, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

{ "runtime": "automatic" }

{ "runtime": "automatic", "importSource": "whatever" }

Uh oh!

osdiab commented May 10, 2021

Uh oh!

ryanrabello left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

avertin commented Oct 14, 2021

Uh oh!

emmatown commented Oct 14, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

iChenLei commented Apr 16, 2021 •

edited

Loading

changeset-bot Bot commented Apr 16, 2021 •

edited

Loading

codesandbox-ci Bot commented Apr 16, 2021 •

edited

Loading

codecov Bot commented Apr 16, 2021 •

edited

Loading

iChenLei commented Apr 24, 2021 •

edited

Loading